<template>
  <div class="about">
    <h1>ref</h1>
    <p>{{count}}{{double}}</p>
    <button type="button" @click="add">add</button>
    <h1>reactive</h1>
    <p>{{reactiveField}} <button @click="addReactive">addField</button></p>
    <p>{{a[0].a}} <button @click="addA">addA</button></p>
  </div>
</template>
<script>
import { computed,ref, reactive, toRefs }  from 'vue'
export default {
  setup () {
    const count = ref(0)
    const state = reactive({
      reactiveField: 0,
      a: [{a:1}]
    })

    const add = () => {
      count.value++
      console.log(count.value)
    }
    
    // 计算属性
    const double = computed(() => count.value *10)
    // const double = computed({
    //   get: () => count.value *10,
    //   set: val => count.value * 10 -1
    // })


    const addReactive = () => {
      state.reactiveField++
    }
    
    const addA = () => {
      state.a[0].a++ 
      console.log(state)
    }

    return {
      count,
      double,
      ...toRefs(state),
      add,
      addReactive,
      addA
    }
  }
}
</script>

// 笔记
// 1 ref 函数传入一个值作为参数,返回一个基于该值的响应式Ref对象
//   该对象中的值一旦被改变和访问，都会被跟踪到
//  2 ref 只可以监听简单数据,reactive可以监听所有数据
//  3 reactive在return时候需要toRefs来转换成响应式对象
//  4 toRefs函数能将reactive创建的响应式对象,转化为普通对象
//    并且这个对象上的每个节点,都是ref()类型的响应式数据
// 5 watchEffect 与 watch的区别
//   不需要手动传入依赖
//   每次初始化时会执行一次回调函数来自动获取依赖
//   无法获取到原值，只能得到变化后的值
//   watchEffect可以手动停止，而非一定要结束之后在停止
//   watch是惰性执行,watchEffect默认会执行一次
//   watch只可以监听他数组中的变量,而不能其余的变化
//   参数不一样watch(source,callback,options) watchEffect(effect,options)